<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:rich="http://richfaces.org/rich"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:s="http://jboss.org/schema/seam/taglib">

<ui:composition template="../WEB-INF/template/template_2x.xhtml">

<ui:define name="head">
  <script type="text/javascript">
    function openDeletePanel() {
      #{rich:component('deletePanel')}
    .
      show();
    }

    function hideDeletePanel() {
      #{rich:component('deletePanel')}
    .
      hide();
    }

    function openUploadPanel() {
      #{rich:component('uploadPanel')}
    .
      show();
    }

    function hideUploadPanel() {
      #{rich:component('uploadPanel')}
    .
      hide();
    }

    function getFileExtension(fileName) {
      var extensionIndex = fileName.lastIndexOf('.') + 1;
      var fileExtension = "";
      if (extensionIndex &lt; fileName.length) {
        fileExtension = fileName.substring(extensionIndex, fileName.length);
      }
      return fileExtension;
    }

    function updateForm(fileName) {
      var fileExtension = getFileExtension(fileName).toUpperCase();
      if (fileExtension == "CSV") {
        document.getElementById('targetLangDiv').style.display = "none";
        document.getElementById('sourceLangDiv').style.display = "none";
        document.getElementById('commentColsDiv').style.display = "";
        document.getElementById('treatCommentSameDiv').style.display = "";
        document.getElementById('#{rich:clientId('uploadButton')}').removeAttribute("disabled")
      }
      else if (fileExtension == "PO") {
        document.getElementById('targetLangDiv').style.display = "";
        document.getElementById('sourceLangDiv').style.display = "";
        document.getElementById('commentColsDiv').style.display = "none";
        document.getElementById('treatCommentSameDiv').style.display = "";
        document.getElementById('#{rich:clientId('uploadButton')}').removeAttribute("disabled");
      }
      else {
        document.getElementById('targetLangDiv').style.display = "none";
        document.getElementById('sourceLangDiv').style.display = "none";
        document.getElementById('commentColsDiv').style.display = "none";
        document.getElementById('treatCommentSameDiv').style.display = "none";
        document.getElementById('#{rich:clientId('uploadButton')}').setAttribute("disabled",
          true);
      }
    }

    function showLoading(show) {
      if (show == true) {
        document.getElementById("#{rich:clientId('fileUploading')}").style.display =
          'inline';
      }
      else {
        document.getElementById("#{rich:clientId('fileUploading')}").style.display =
          'none';
      }
    }

    function showDeleting(show) {
      if (show == true) {
        document.getElementById("#{rich:clientId('deleting')}").style.display =
          'inline';
      }
      else {
        document.getElementById("#{rich:clientId('deleting')}").style.display =
          'none';
      }
    }

  </script>
</ui:define>


<ui:define name="page_title">#{msgs['jsf.Glossary']}</ui:define>
<ui:define name="center_content">
  <h:form id="glossary_form">
    <s:token allowMultiplePosts="true"/>
    <rich:dataTable id="data_table" width="100%"
      value="#{glossaryAction.getStats()}" var="language"
      styleClass="iteration_inline_tribes">
      <rich:column sortBy="#{language.localeId}" styleClass="centered">
        <f:facet name="header">#{msgs['jsf.Language']}</f:facet>
        <s:link view="/language/language.xhtml" propagation="none"
          value="#{language.localeId}" styleClass="table_link">
          <f:param name="id" value="#{language.localeId}"/>
        </s:link>
      </rich:column>

      <rich:column sortBy="#{language.name}" styleClass="centered">
        <f:facet name="header">#{msgs['jsf.Name']}</f:facet>
        #{language.name}
      </rich:column>

      <rich:column sortBy="#{language.entryCount}" styleClass="centered">
        <f:facet name="header">#{msgs['jsf.Entries']}</f:facet>
        #{language.entryCount}
      </rich:column>
    </rich:dataTable>
  </h:form>

  <rich:popupPanel id="uploadPanel" moveable="#{true}"
    resizeable="#{false}" autosized="#{true}">
    <f:facet name="header">
      <h:outputText value="#{msgs['jsf.Upload']}"/>
    </f:facet>
    <h:form id="uploadForm" enctype="multipart/form-data">
      <div>
        <h:outputLabel value="#{msgs['jsf.Glossary.supportedFileFormat']}"
          class="glossarySupportedFileLabel"/>
      </div>

      <s:fileUpload id="fileUpload" accept="*"
        data="#{glossaryAction.glossaryFileUpload.fileContents}"
        fileName="#{glossaryAction.glossaryFileUpload.fileName}"
        onchange="updateForm(this.value)">
      </s:fileUpload>

      <div title="#{msgs['jsf.Glossary.SourceLocale.Title']}"
        class="glosaryFileUploadDialog" id="sourceLangDiv" style="display:none">
        <h:outputLabel value="#{msgs['jsf.SourceLanguage']}"/>
        <h:selectOneMenu
          value="#{glossaryAction.glossaryFileUpload.sourceLang}">
          <s:selectItems value="#{glossaryAction.availableLocales}"
            var="locale"
            label="#{locale.localeId.id}  -  #{locale.retrieveNativeName()}"
            itemValue="#{locale.localeId.id}" escape="true"/>

        </h:selectOneMenu>
      </div>
      <div title="#{msgs['jsf.Glossary.TargetLocale.Title']}"
        class="glosaryFileUploadDialog" id="targetLangDiv" style="display:none">
        <h:outputLabel value="#{msgs['jsf.TargetLanguage']}"/>
        <h:selectOneMenu
          value="#{glossaryAction.glossaryFileUpload.transLang}">
          <s:selectItems value="#{glossaryAction.availableLocales}"
            var="locale"
            label="#{locale.localeId.id}  -  #{locale.retrieveNativeName()}"
            itemValue="#{locale.localeId.id}" escape="true"/>

        </h:selectOneMenu>
      </div>

      <div class="glosaryFileUploadDialog" id="treatCommentSameDiv"
        style="display:none">
        <h:outputText
          value="#{msgs['jsf.Glossary.TreatSourceCommentsAsTarget']}"
          title="#{msgs['jsf.Glossary.TreatSourceCommentsAsTarget.Title']}"/>
        <h:selectBooleanCheckbox
          value="#{glossaryAction.glossaryFileUpload.treatSourceCommentsAsTarget}"
          title="#{msgs['jsf.Glossary.TreatSourceCommentsAsTarget.Title']}"/>
      </div>

      <div class="glosaryFileUploadDialog" id="commentColsDiv"
        style="display:none">
        <h:outputText value="#{msgs['jsf.Glossary.CommentColumnNames']}"
          title="#{msgs['jsf.Glossary.CommentColumnNames.Title']}"/>
        <h:inputText
          value="#{glossaryAction.glossaryFileUpload.commentCols}"
          title="#{msgs['jsf.Glossary.CommentColumnNames.Title']}"/>
      </div>


      <div align="right" class="glosaryFileUploadDialog">
        <h:graphicImage value="/images/loading.gif" id="fileUploading"
          style="display:none"/>
        <h:commandButton value="#{msgs['jsf.Upload']}"
          action="#{glossaryAction.uploadFile}" id="uploadButton"
          onclick="showLoading(true)"/>
        <h:commandButton value="#{msgs['jsf.Cancel']}"
          onclick="showLoading(false);hideUploadPanel();return false;"/>
      </div>
    </h:form>
  </rich:popupPanel>

  <rich:popupPanel id="deletePanel" moveable="#{true}"
    resizeable="#{false}" autosized="#{true}">
    <f:facet name="header">
      <h:outputText value="#{msgs['jsf.Delete']}"/>
    </f:facet>

    <div class="glosaryDeleteWarn">
      <span class="icon-attention warn"><h:outputText
        value="#{msgs['jsf.ThisActionCannotBeUndone']}"/></span>

    </div>

    <h:form id="deleteForm">
      <div class="glosaryDeleteDialog">
        <h:outputLabel value="#{msgs['jsf.SelectLocaleToDelete']}:"/>
        <h:selectOneMenu
          value="#{glossaryAction.localeToDelete}">
          <s:selectItems value="#{glossaryAction.availableLocales}"
            var="locale"
            label="#{locale.localeId.id}  -  #{locale.retrieveNativeName()}"
            itemValue="#{locale.localeId.id}" escape="true"/>
        </h:selectOneMenu>
      </div>

      <div align="right" class="glosaryDeleteDialog">
        <h:graphicImage value="/images/loading.gif" id="deleting"
          style="display:none"/>
        <h:commandButton value="#{msgs['jsf.Delete']}"
          action="#{glossaryAction.delete}" id="deleteButton"
          onclick="showDeleting(true)"/>
        <h:commandButton value="#{msgs['jsf.Cancel']}"
          onclick="showDeleting(false);hideDeletePanel();return false;"/>
      </div>
    </h:form>
  </rich:popupPanel>

</ui:define>

<ui:define name="right_content">
  <rich:panel id="loggedIn"
    rendered="#{s:hasPermission('', 'glossary-delete') or s:hasPermission('', 'glossary-insert')}">
    <f:facet name="header">#{msgs['jsf.Actions']}</f:facet>
    <s:fragment rendered="#{s:hasPermission('', 'glossary-insert')}">
      <a href="#" onclick="openUploadPanel(); return false;"
        class="action_link">#{msgs['jsf.Upload']}</a>
    </s:fragment>
    <s:fragment rendered="#{s:hasPermission('', 'glossary-delete')}">
      <a href="#" onclick="openDeletePanel(); return false;"
        class="action_link">#{msgs['jsf.Delete']}</a>
    </s:fragment>
  </rich:panel>
</ui:define>

</ui:composition>
</html>
